<template>
  <div>
    <Nav message="-1" />
    <!-- <van-button type="default" @click="test">默认按钮</van-button> -->
    <van-cell-group
      class="m-card"
      style="padding: 0.5rem"
      @click="selectAddress"
    >
      <van-cell is-link>
        <van-col span="24">收货人：{{ buyerAddress.name }}</van-col>
        <van-col>联系方式：{{ buyerAddress.tel }}</van-col>
        <van-col span="24">收货地址：{{ buyerAddress.address }}</van-col>
      </van-cell>
    </van-cell-group>

    <div class="m-card" v-for="(item, index) in ordersDetail" :key="index">
      <van-card
        :num="item.num"
        :price="item.price"
        :title="item.spuName"
        :thumb="item.icon"
      >
        <template #title>
          <div class="van-multi-ellipsis--l3" style="font-size: 0.8rem">
            {{ item.spuName }}
          </div>
        </template>
        <template #tags>
          <van-tag
            v-for="tag in item.skuTag"
            :key="tag"
            style="margin-right: 0.3rem"
            >{{ tag }}</van-tag
          >
        </template>
      </van-card>

      <van-cell-group>
        <van-cell>
          <van-col style="float: right">配送：快递￥{{ item.freight }}</van-col>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell style="font-weight: bold">
          <van-col style="color: rosybrown; float: right"
            >共{{ item.num }}件 小计：￥{{ item.amount }}</van-col
          >
        </van-cell>
      </van-cell-group>
    </div>
    <div style="height: 4rem"></div>
    <van-submit-bar
      :price="ordersDetailAmount * 100"
      button-text="提交订单"
      @submit="submitOrder"
    >
    </van-submit-bar>
    
  </div>
</template>
<script>
import Nav from "@/components/Nav.vue";
import { Toast } from "vant";
export default {
  components: {
    Nav,
  },
  created() {
    let token = this.$cookie.get("shoptoken");
    if (token == null) {
      this.$router.push({ path: "/login", query: { item: this.$route.path } });
    }

    //item跳来
    let skuId = this.$route.query.skuId;
if(skuId != undefined){


console.log("item跳来")


    let skuNum = this.$route.query.skuNum;
    let addressId = this.$route.query.addressId;
    this.detailGoAddressSkuId = skuId;
    this.detailGoAddressSkuNum = skuNum;

    // this.$store.state.detailGoAddressSkuId = skuId;
    // this.$store.state.detailGoAddressSkuNum = skuNum;
    // let skuId = this.$store.state.detailGoAddressSkuId;
    // let skuNum = this.$store.state.detailGoAddressSkuNum;
    // let addressId = this.$store.state.addressGoDetailAddressId;

    const _this = this;
    axios
      .get(this.$api + "product/findDetailByskuIdAndSkuNum", {
        params: {
          skuId: skuId,
          skuNum: skuNum,
          addressId: addressId,
        },
      })
      .then(function (resp) {
        console.log(resp);
        _this.ordersDetail = resp.data.data.ordersDetail;
        if (resp.data.data.buyerAddress != null) {
          _this.buyerAddress.name = resp.data.data.buyerAddress.buyerReceiveName;
          _this.buyerAddress.tel = resp.data.data.buyerAddress.buyerReceiveTel;
          //去掉详细地址中的&
          let hasFlagAddress = resp.data.data.buyerAddress.buyerReceiveDetailAddress;
          // console.log(hasFlagAddress)
          let flagIndex = hasFlagAddress.indexOf("&");
          let substringAddressLast = hasFlagAddress.substring(flagIndex + 1);
          let substringAddressFirst = hasFlagAddress.substring(0, flagIndex);
          _this.buyerAddress.address = substringAddressFirst + substringAddressLast;
        }
      });

    // 购物车跳来，固定数据
    // let skuList = this.$route.query.item;
    // if (skuList[0].icon != undefined) {
    //   let skus = JSON.stringify(skuList);
    //   console.log("订单详情页面，购物车或item跳来" + skuList[0].icon);
    //   this.ordersDetail = skuList;
    // }





}else{
//购物车跳来
const _this = this;
axios.get(this.$api + "card/findCardDetailByBuyerId", {
  params: {
    token: token,
  },
})
.then(function (resp) {
_this.ordersDetail = resp.data.data.ordersDetail
});


let cardAddressId = this.$route.query.addressId;
if(cardAddressId != null){
  // const _this = this;
axios.get(this.$api + "member/findLineByAddressIdAndToken", {
  params: {
    token: token,
    addressId: cardAddressId,
  },
})
.then(function (resp) {
if(resp.data.code == 0){
          _this.buyerAddress.name = resp.data.data.buyerReceiveName;
          _this.buyerAddress.tel = resp.data.data.buyerReceiveTel;

          // 去掉详细地址中的&
          let hasFlagAddress = resp.data.data.buyerReceiveDetailAddress;
          let flagIndex = hasFlagAddress.indexOf("&");
          let substringAddressLast = hasFlagAddress.substring(flagIndex + 1);
          let substringAddressFirst = hasFlagAddress.substring(0, flagIndex);
          _this.buyerAddress.address = substringAddressFirst + substringAddressLast;
          console.log(_this.buyerAddress)

          _this.timer = setTimeout(()=>{   //设置延迟执行
    console.log('ok');
    _this.$set(_this.buyerAddress)
},10);

}

});
}










}

  },
  beforeUpdate() {
    if(this.countAmountFlag){
    //计算总价
    for (let index = 0; index < this.ordersDetail.length; index++) {
      this.ordersDetailAmount += this.ordersDetail[index].amount;
    }
    }
this.countAmountFlag = false
    
  },
  data() {
    return {
      countAmountFlag:true,
      ordersDetailAmount: 0,
      // saveLineSkuVO:{ordersDetail: 
      //   {
      //     spuName:
      //       "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
      //     freight: 10, //运费
      //     num: 1,
      //     price: "30000.33",
      //     icon: "../static/imac-white-1.png",
      //     amount: 30010.333, //总价
      //     skuTag: ["灰色", "32G"],
      //   },      buyerAddress: {
      //   name: "Sherry",
      //   tel: "13399990000",
      //   address: "美国华盛顿哥伦比亚特区西北宾夕法尼亚大道1600号",
      // }},
      ordersDetail: [
        // {
        //   spuName:
        //     "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
        //   freight: 10, //运费
        //   num: 1,
        //   price: "30000.33",
        //   icon: "../static/imac-white-1.png",
        //   amount: 30010.333, //总价
        //   skuTag: ["灰色", "32G"],
        // },
        // {
        //   orderId: "1586242977480760991",
        //   spuName:
        //     "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
        //   payStatus: 1, //支付状态
        //   freight: 20, //运费
        //   num: 2,
        //   price: "50000.55",
        //   icon: "../static/imac-white-1.png",
        //   amount: 50010.55, //总价
        //   skuTag: ["灰色", "32G"],
        //   // skusInfo: [
        //   //   {
        //   //     skuName: "颜色",
        //   //     skuValue: "灰色",
        //   //   },
        //   //   {
        //   //     skuName: "内存",
        //   //     skuValue: "32G",
        //   //   },
        //   // ],
        // },
      ],
      buyerAddress: {
      //   name: "Sherry",
      //   tel: "13399990000",
      //   address: "美国华盛顿哥伦比亚特区西北宾夕法尼亚大道1600号",
      },
      activeKey: 0,
      detailGoAddressSkuId: null, //详情页跳地址
      detailGoAddressSkuNum: null, //详情页跳地址
    };
  },
  methods: {
    submitOrder() {
      // this.$router.push(
      //   "/pay?orderId=" + this.data.orderId + "amount=" + this.data.amount
      // );



              if (this.$route.query.addressId == null) {
            let instance = Toast("请选择收货地址");
            setTimeout(() => {
              instance.close();
            }, 1000);
            return;
          }











let token = this.$cookie.get("shoptoken");
if (token == null) {
  this.$router.push({
    path: "/login",
    query: { item: this.$route.path },
  });
}
const _this = this;



if(this.$route.query.skuId == null){
axios.get(this.$api + "order/buy", {
  params: {
    token: token,
    addressId:this.$route.query.addressId,
  },
})
.then(function (resp) {
  if(resp.data.code==0){
                let instance = Toast("交易成功");
            setTimeout(() => {
              instance.close();
              _this.$router.push("/order");
            }, 1000);

  }
});
}




if(this.$route.query.skuId != null){

let l = {ordersDetail:{},addressId:null,token:null}
l.ordersDetail=  this.ordersDetail[0]
l.addressId=  this.$route.query.addressId
l.token = token
console.log(this.$route.query.addressId)

axios
  .post(this.$api + "order/saveLineSku", l, {
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    },
  })
  .then(function (resp) {
  if(resp.data.code==0){
                let instance = Toast("交易成功");
            setTimeout(() => {
              instance.close();
              _this.$router.push("/order");
            }, 1000);
  }
  });
}










    },
    selectAddress() {
      // this.$router.push("/addressList");
      this.$router.push({
        path: "/addressList",
        query: {
          skuId: this.detailGoAddressSkuId,
          skuNum: this.detailGoAddressSkuNum,
        },
      });
    },
    // test(){
    //   this.$set(this.buyerAddress)
    // }
  },
};
</script>
<style scope>
.van-button {
  background: rosybrown;
  border: rosybrown;
}
.van-submit-bar__price {
  color: rosybrown;
}
/* nav */
.van-sidebar-item--select {
  background: rgb(201, 255, 119);
}
/* nav */
.van-sidebar-item::before {
  background: rgb(255, 154, 205);
  height: 100%;
  width: 10px;
}
/* nav */
.van-sidebar {
  width: 100%;
}
.m-card {
  padding: 0 0.5rem 0.5rem 0.5rem;
  background: rgb(233, 217, 224);
}
</style>